<script setup>
import router from '@/router'
// 示例菜单数据，可根据实际业务替换为 API 获取
const menuItems = [
  { path: '/peijian', label: '配件库' },
  { path: '/yonghu', label: '用户管理' },
  { path: '/pinpai', label: '汽车品牌管理' },
  { path: '/glxh', label: '汽车型号管理' },
  { path: '/pinlei', label: '配件品类管理' },
  { path: '/pjpz', label: '配件品质管理' },
  { path: '/ddjl', label: '订单记录' },
  { path: '/ddts', label: '订单推送' },
]
const tuichu = () => {
  router.push('/login')
}
</script>

<template>
  <el-container class="biaodan">
    <el-aside width="200px" style="height: 100%; background-color: #001529; top: 0; left: 0">
      <div class="daohang">
        <img src="@/assets/logo-houtaiguanli.png" alt="" />
        <span>管理平台</span>
      </div>
      <el-menu
        active-text-color="#0478fc"
        background-color="#001529"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
          <span style="margin-left: 30px">{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div><span class="iconfont icon-caidanzhankai zuo"></span></div>
        <el-dropdown placement="bottom-end">
          <span style="position: absolute; right: 5px; top: -5px">name</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="tuichu" command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 4840407 */
  src:
    url('//at.alicdn.com/t/c/font_4840407_8k1omi8irz3.woff2?t=1741395069756') format('woff2'),
    url('//at.alicdn.com/t/c/font_4840407_8k1omi8irz3.woff?t=1741395069756') format('woff'),
    url('//at.alicdn.com/t/c/font_4840407_8k1omi8irz3.ttf?t=1741395069756') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-caidanzhankai:before {
  content: '\e65a';
}

.icon-caidandakai:before {
  content: '\e600';
}

.icon-caidanshouqi:before {
  content: '\e658';
}

.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.biaodan {
  height: 100vh;
  position: relative;
}

.daohang {
  height: 60px;
  background-color: #001529;
  color: white;
  display: flex;
  align-items: center;
}

.daohang img {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-left: 40px;
}
</style>
